<template>
  <div class="review-section">
    <h2 class="review-title">Movie Reviews</h2>
    <div class="review-container">
      <ReviewForm @submit-review="addReview" :movie_id="movie_id"/>
      <ReviewList :reviews="reviews" />

    </div>
  </div>
</template>

<script lang="ts">
import ReviewForm from './ReviewForm.vue';
import ReviewList from './ReviewList.vue';
import type {Review} from '@/utility/interfaces';
import {loadReviews} from '@/utility/untility functions'

export default {
  components: { ReviewForm, ReviewList },
  props: ["movie_id"],
  data() {
    return {
      reviews: [] as Review[], // Raw reviews fetched from the backend
      sortedReviews: [], // Reviews after sorting
      sortOption: 'date', // Default sorting by date
    };
  },
  methods: {
    async fetchReviews() {
    // Extract the movie list from the response
      console.log('获取评论');
      this.reviews = await loadReviews(this.movie_id);

    },
    addReview(newReview) {
      console.log('添加评论后');
      this.fetchReviews();
      // this.reviews.push(newReview);
    },
  },
  // async created() {
  //   await this.fetchReviews();
  // },
  // movie_id 不为0时，重新获取评论
  watch: {
    movie_id: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal !== 0) {
          this.fetchReviews();
        }
      },
    },
  },
};
</script>

<style scoped>
.review-section {
  display: flex;
  flex-direction: column;
  width: 80%;
  max-width: 1200px;
  gap: 1.5rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.review-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.review-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 768px) {
  .review-section {
    width: 90%;
    padding: 1rem;
  }
}
</style>
